<template>
  <view class="scrool-page">
    <view class="header-cont">
      <view class="accountName">{{ account?.name }}</view>
      <view>
        <image class="image" :fade-show="true" mode="aspectFill"
          :src=account?.avatar></image>
        <Icon icon="bi:person-add" style="color: black;position: relative;left: 230rpx;bottom: 100rpx;font-size: 50rpx;"
          />
      </view>
      <view>
      </view>

    </view>

    <view class="list-cont">
      <uni-list>
        <uni-list :border="true" v-for="i in talkList" :key="i.id">
          <!-- 右侧带角标 -->
          <uni-list-chat :avatar-circle="true" :title=i.roomName :avatar=i.avatar :note=i.message badge-text="99">
            <view class="chat-custom-right">
              <!-- 需要使用 uni-icons 请自行引入 -->
              <uni-icons type="chat" color="#999" size="40"></uni-icons>
            </view>
          </uni-list-chat>
        </uni-list>
      </uni-list>
    </view>

    <uni-list>
	<uni-list :border="true">
		<!-- 显示圆形头像 -->
		<uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" ></uni-list-chat>
		<!-- 右侧带角标 -->
		<uni-list-chat title="uni-app" avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12"></uni-list-chat>
		<!-- 头像显示圆点 -->
		<uni-list-chat title="uni-app" avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
		<!-- 头像显示角标 -->
		<uni-list-chat title="uni-app" avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat>
		<!-- 显示多头像 -->
	
	</uni-list>
</uni-list>

    
  </view>
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue'
import { Icon } from '@iconify/vue';
import { request } from '@/api/request'
import { onLoad, onShow } from '@dcloudio/uni-app';
import type { ChatDto } from '@/api/model/chat/ChatDto';
import type { AccountDto } from "@/api/model/account/AccountDto";
const token = ref('')
const talkList: Ref<ChatDto[]> = ref([])
const account: Ref<AccountDto | undefined> = ref();
    
  onLoad((option) => {
    account.value = uni.getStorageSync('account');
    findTalk()

    
  });
  
const findTalk = async () => {
  const value = uni.getStorageSync('token');
  console.log('token' + token.value)
  const operation = {
    method: 'GET',
    url: `/main/friend/findFriend`,
    data: '',
    tokenRequired: true // 新增，表示是否需要token
  }
  const res = await request(operation)
  talkList.value = res.data.friend

}


</script>

<style lang="scss">

page {
  width: 100%;
  height: 100%;
}

.scrool-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.header-cont {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 150rpx;
  line-height: 100rpx;
  text-align: center;
  background: #F1F5FF;
  z-index: 99;

  .accountName {
    position: relative;
    right: 140rpx;
    font-size: 30rpx;
    font-family: "宋体";
    top: 15rpx;
  }

  .image {
    position: relative;
    right: 270rpx;
    bottom: 70rpx;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
  }
}

.list-cont {
  flex: 1;
  margin-top: 150rpx;
  padding-bottom: 3rem;
}

</style>